<template>
    <div class="verification">
        <div class="header">
            <div class="header_cont pointer">
                <div class="logo">
                    <img src="@/assets/img/logo.png" class="mr" />
                    <img src="@/assets/img/header_line.png" class="mt" />
                </div>
                <div class="title">电力创新奖申报平台—电力科技创新奖</div>
            </div>
          <div class="top_menu">
            <a-menu v-model="current" mode="horizontal">
              <a-menu-item key="gwsy">
                <a href="https://www.cec.org.cn/" target="_blank">官网首页</a>
              </a-menu-item>
              <a-menu-item key="ptsy">
                <a @click="toIndex">平台首页</a>
              </a-menu-item>
              <a-menu-item key="tzgg">
                <a @click="alterTzgg()">通知公告</a>
              </a-menu-item>
              <a-menu-item key="zlzx">
                <a @click="alterZlzx()">资料中心</a>
              </a-menu-item>
            </a-menu>
          </div>
        </div>
        <div class="main">
            <div class="main_title">原系统账号验证登录</div>
            <div class="step_cont">
                <div class="step_li" :class="curIndex=='0'?'active':''">
                    <img v-if="curIndex=='0'" src="@/assets/img/steps.png"/>
                    <em v-else>1</em>
                    <span>原账号验证</span>
                </div>
                <div class="lines"></div>
                <div class="step_li" :class="curIndex=='1'?'active':''">
                    <img v-if="curIndex=='1'" src="@/assets/img/steps.png"/>
                    <em v-else>2</em>
                    <span>绑定手机号</span>
                </div>
                <div class="lines"></div>
                <div class="step_li" :class="curIndex=='2'?'active':''">
                    <img v-if="curIndex=='2'" src="@/assets/img/steps.png"/>
                    <em v-else>3</em>
                    <span>完成验证</span>
                </div>
            </div>
            <div class="ver_cont">
                <div class="ver_cont_li" v-if="curIndex=='0'">
                    <div class="cont_li">
                        <div class="cont_li_name">
                            账号：
                        </div>
                        <div class="cont_li_input">
                            <a-input type="text" v-model="perzh" placeholder="请输入账号" @keyup.enter.native="submit_pre"/>
                        </div>
                    </div>
                    <div class="cont_li">
                        <div class="cont_li_name">
                            密码：
                        </div>
                        <div class="cont_li_input">
                            <a-input type="password" v-model="perpwd" placeholder="请输入密码" @keyup.enter.native="submit_pre"/>
                        </div>
                    </div>
                    <div class="submitpre_btn pointer" @click="submit_pre">确定</div>
                </div>
                <div class="ver_cont_li" v-else-if="curIndex=='1'">
                    <div class="cont_li">
                        <div class="cont_li_name">
                            图片验证码：
                        </div>
                        <div class="cont_li_input captcha">
                            <a-input type="text" v-model="gapcode" placeholder="请输入您看到的图片验证码" @keyup.enter.native="submit_register"/>
                            <span class="pointer" @click="getrandomImage">
                                <img :src="result"/>
                            </span>
                        </div>
                    </div>
                    <div class="cont_li">
                        <div class="cont_li_name">
                            手机号：
                        </div>
                        <div class="cont_li_input">
                            <a-input type="text" v-model="phone" placeholder="请输入手机号" @keyup.enter.native="submit_register"/>
                        </div>
                    </div>
                    <div class="cont_li">
                        <div class="cont_li_name">
                            手机验证码：
                        </div>
                        <div class="cont_li_input vercode">
                            <a-input type="text" v-model="identify" placeholder="请输入手机验证码" @keyup.enter.native="submit_register"/>
                            <span class="pointer getCodeBtn" id="getCodeBtn" @click="getCode">获取短信验证码</span>
                            <span class="downtimecount" id="downtimecount" style="display: none;"></span>
                        </div>
                    </div>
                    <div class="submitpre_btn pointer" @click="submit_register">确定</div>
                </div>
                <div class="ver_cont_li" v-else-if="curIndex=='2'">
                    <div class="ver_cg">
                        <img src="@/assets/img/chenggong.png"/>
                        <p>
                            <span class="p1">验证成功</span>
                            <span class="p2">请使用绑定手机的手机号和原密码进行登录</span>
                        </p>
                    </div>
                    <div class="login_btn pointer" @click="tologin">去登录</div>
                </div>
            </div>
        </div>
      <footer-cont></footer-cont>
    </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header';
import footerCont from '@/views/declarationSystem/common/footer';
import achievements from '@/views/declarationSystem/achievements/index';
import {
    cxjsb_UserVerification,
    cxjsb_UserBindRegister,
    randomImage, 
    cxjsb_getYzm 
} from '@/api/shenbao';
var timer, curCount = 60;
function setCountDown() {
    if (curCount === 0) {
		curCount = 60;
        window.clearInterval(timer);
        document.getElementById('getCodeBtn').style.display="block";
        document.getElementById('downtimecount').style.display="none";
    } else {
        curCount--;
        document.getElementById('downtimecount').style.display="block";
        document.getElementById('getCodeBtn').style.display="none";
        document.getElementById('downtimecount').innerHTML = "请在"+curCount+"秒内输入验证码";
    }
}
    export default {
      components: {
        headerCont,
        footerCont,
        achievements
      },
        name: 'verification',
      inject:['reload'],
        data() {
            return {
                curIndex: 0,
                perzh: '',
                perpwd: '',
                gapcode: '',
                identify: '',
                phone: '',
                key: '',
                result: '',
                reg: /^1[3456789]\d{9}$/,
              current: ['ptsy'],
            }
        },
        methods: {
            getrandomImage() {
                let that = this;
                this.key = new Date().getTime();
                randomImage(that.key).then(res=>{
                    that.result = res.data.result;
                })
            },
            submit_pre() {
                let that = this;
                if (!this.perzh) {
                    that.$message.warning('请输入原始账号');
                    return
                } 
                if (!this.perpwd) {
                    that.$message.warning('请输入原始密码');
                    return
                }
                cxjsb_UserVerification({
                    passWord: that.perpwd,
                    user_id: that.perzh
                }).then(res=>{
                    if (res.data.code=='200') {
                        that.$message.success('验证成功');
                        that.curIndex = 1;
                    } else {
                        that.$message.error(res.data.message);
                    }
                    console.log(res, 'res')
                })
            },
            getCode() {
                let that = this;
                if (!this.phone) {
                    that.$message.warning('请输入手机号');
                    return 
                } 
                if(!this.reg.test(this.phone)) {
                    that.$message.warning('手机号格式不正确');
                    return 
                }
                if(!this.gapcode) {
                    that.$message.warning('请输入图片验证码');
                    return
                }
                cxjsb_getYzm({
                    code: that.gapcode,
                    key: that.key,
                    phoneNumber: that.phone,
                    type: 2
                }).then(res=>{
                    if (res.data.code=='200') {
                        that.$message.success('发送成功');
                        timer = window.setInterval(setCountDown, 1000);
                    } else {
                        that.getrandomImage();
                        that.$message.error(res.data.message);
                    }
                })  
            },
            submit_register() {
                let that = this;
                if (!this.phone) {
                    that.$message.warning('请输入手机号');
                    return 
                } 
                if(!this.gapcode) {
                    that.$message.warning('请输入图片验证码');
                    return
                }
                if (!this.identify) {
                    that.$message.warning('请输入手机验证码');
                    return
                }
                cxjsb_UserBindRegister({
                    phoneNumber: that.phone, 
                    code: that.identify,
                    passWord: that.perpwd,
                    user_id: that.perzh
                }).then(res=>{
                    if (res.data.code=='200') {
                        that.$message.success('注册成功');
                        that.curIndex = 2;
                    } else {
        			    that.getrandomImage();
                        that.$message.warning(res.data.message);
                    }
                })
            },
            tologin() {
                this.$router.replace({
                    path: '/shenbao/login'
                })
            },
          toIndex(){
            this.$router.push('/shenbao/entrance')
            // this.current = 'ptsy'
            this.current = ['ptsy']
          },
          alterTzgg(){
            this.reload()
            this.$router.push('/shenbao/articleList?ind=0')
          },
          alterZlzx(){
            this.reload()
            this.$router.push('/shenbao/articleList?ind=1')

          },
        },
        mounted() {
            this.getrandomImage();
        }
    }
</script>

<style lang="less" scoped>
.verification {
    width: 100%;
    background-color: #f7f7f7;
    .main {
        width: 750px;
        margin: 0 auto;
        margin-top: 20px;
        background-color: #fff;
        padding: 30px;
    }
}
.header {
  width: 100%;
  height: 144px;
  position: relative;
  background-color: #ffffff;
  background-image: url("../../../assets/img/toparea.png");
  margin-bottom: 40px;
}
.header_cont {
  width:1400px;
  margin: 0 auto;
  position: relative;
  top: 15px;
  display: flex;
  overflow: hidden;
  .logo {
    display: flex;
    align-items: flex-start;
  }
  .mr {
    margin-right:20px;
    height: 70px;
  }
  .mt {

  }
  .title {
    font-size: 30px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #0a4174;
    line-height: 50px;
    margin-left: 20px;
    padding-top: 10px;
    box-sizing: border-box;
    font-weight: 500;
  }
}
.header_right {
  position: absolute;
  right: 0;
  top: 20px;
  span {
    height: 30px;
    font-size: 22px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 30px;
  }
}
.main_title {
    font-size: 34px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    color: #333333;
    line-height: 48px;
    width:100%;
    text-align: center;
}
.step_cont {
    margin: 50px auto 0;
    width: 540px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .lines {
        width: 120px;
        height: 6px;
        background: #D2E5FA;
        border-radius: 5px;
        opacity: 0.6;
        position: relative;
        top: 10px;
    }
    .step_li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            width: 30px;
            height: 30px;
        }
        em {
            width: 24px;
            height: 24px;
            background: #7789A4;
            font-style: normal;
            text-align: center;
            line-height: 24px;
            font-size: 14px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 400;
            color: #FFFFFF;
            border-radius: 50%;
        }
        span {
            font-size: 16px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 400;
            color: #7789A4;
            margin-top: 18px;
        }
        &.active {
            span {
                font-weight: 500;
                margin-top: 14px;
                color: #333333;
            }
        }
    }
}
.ver_cont {
    width: 600px;
    margin: 60px auto 0;
}
.cont_li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .cont_li_name {
        font-size: 16px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 400;
        color: #333333;
        min-width: 98px;
        text-align: left;
        margin-left: 22px;
        span {
            color: #F10505;
            font-size: 18px;
            margin-right: 6px;
        }
    }
    .cont_li_input {
        margin-left: 10px;
        input {
            width: 434px;
            height: 50px;
            border-radius: 4px;
            border: 1px solid #ECEBEB;
            text-indent: 1em;
        }
        &.captcha {
            width: 434px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            input {
                width: 304px;
            }
            span {
                width: 127px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                // border:1px solid #f7f7f7;
                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
        }
        &.vercode {
            position: relative;
            span {
                position: absolute;
                right: 22px;
                top:13px;
                font-size: 18px;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                font-weight: 400;
                color: #006DC0;
                &.downtimecount {
                    color: #999;
                }
            }
        }
    }
    .cont_li_tips {
        font-size: 18px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 400;
        color: #666666;
        margin-left: 20px;
    }
}
.ver_cg {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        width: 70px;
        height: 70px;
    }
    p {
        margin-left: 30px;
        .p1 {
            font-size: 20px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 400;
            color: #64C201;
            display: block;
        }
        .p2 {
            font-size: 18px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-weight: 400;
            color: #333;
            display: block;
        }
    }
}
.submitpre_btn {
    width: 434px;
    height: 54px;
    background: linear-gradient(90deg, #267FEA 0%, #519FF8 100%);
    border-radius: 4px;
    font-size: 22px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 54px;
    text-align: center;
    margin-left: 130px;
    margin-top: 50px;
}
.login_btn {
    width: 434px;
    height: 54px;
    background: linear-gradient(90deg, #267FEA 0%, #519FF8 100%);
    border-radius: 4px;
    font-size: 22px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 54px;
    text-align: center;
    margin-top: 70px;
    margin-left: 53px;
}
.top_menu {
  background-image: url("../../../assets/img/bar.png");
  position: relative;
  display: flex;
  top: 26px;
  height: 49px;
  ul {
    width: 1200px;
    margin: 0 auto;
  }
  .ant-menu-horizontal {
    background-image: url("../../../assets/img/bar.png");
    border-bottom: none;
  }
  .ant-menu-horizontal > .ant-menu-item > a {
    color: #ffffff;
    font-size: 17px;
    letter-spacing: 2px;
    font-weight: 400;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-stretch: 100%;
    text-size-adjust:100%;
  }
  .ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-item-selected{
    background-image: url("../../../assets/img/select.png");
    border-bottom: none;
  }
  .ant-menu-item, .ant-menu-submenu-title {
    padding: 0px 43px;
  }
  .zdl-menu-bar-group-item:hover {
    background: url("../../../assets/img/select.png") center center no-repeat;
    background-size: 100% 49px;
  }
}
</style>